<template>
    <!-- components/inputSearch/index.wxml -->
    <!-- 搜索框 -->
    <view class="input_search_bar">
        <view class="input_search_bar_box">
            <van-icon class-prefix="iconfont" name="sousuoyesousuo" size="32rpx" />
            <input type="text" class="input_search_bar_input" maxlength="20" :placeholder="placeholder" :value="inputValClone" @input="inputTyping" />
            <view v-if="inputValClone.length > 0" @tap="clearInput">
                <van-icon name="clear" size="32rpx" color="#D4D4D4" />
            </view>
        </view>
        <view class="input_search_bar_cancel_btn" @tap="searchBtn">搜索</view>
    </view>
</template>

<script>
// components/inputSearch/index.js
export default {
    data() {
        return {
            inputValClone: ''
        };
    },
    props: {
        inputVal: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: '请输入内容'
        }
    },
    methods: {
        clearInput: function () {
            this.setData({
                inputValClone: ''
            });
        },
        inputTyping: function (e) {
            this.setData({
                inputValClone: e.detail.value
            });
        },
        searchBtn: function () {
            if (this.inputVal) {
                this.$emit('searchVal', {
                    detail: this.inputVal
                });
            } else {
                uni.showToast({
                    icon: 'none',
                    title: '请输入搜索内容'
                });
            }
        }
    },
    created: function () {},
    watch: {
        inputVal: {
            handler: function (newVal, oldVal) {
                this.inputValClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
